/*
 * Copyright 2022 Nightingale Team
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React from 'react';
import { Form, Input, InputNumber, Button, Select, Row, Col, Tooltip } from 'antd';
import { DeleteOutlined, InfoCircleOutlined } from '@ant-design/icons';
import _ from 'lodash';
import { useTranslation, Trans } from 'react-i18next';
import { Panel } from '../../../Components/Collapse';
import ColorPicker from '../../../../Components/ColorPicker';

interface IProps {
  preNamePrefix?: (string | number)[];
  namePrefix?: (string | number)[];
}

export default function index(props: IProps) {
  const { t } = useTranslation('dashboard');
  const { preNamePrefix = [], namePrefix = ['options', 'valueMappings'] } = props;

  return (
    <Panel header={t('panel.options.valueMappings.title')} data-oid='gzhk3v8'>
      <Form.List name={namePrefix} data-oid='d3t-32z'>
        {(fields, { add, remove }) => (
          <>
            <Button
              style={{ width: '100%', marginBottom: 10 }}
              onClick={() => {
                add({
                  type: 'textValue',
                });
              }}
              data-oid='nbq8-93'
            >
              {t('panel.options.valueMappings.btn')}
            </Button>
            {_.isEmpty(fields) ? null : (
              <Row gutter={10} data-oid='2zm2_ds'>
                <Col flex='330px' data-oid='gwhfqf8'>
                  <Tooltip
                    overlayInnerStyle={{
                      width: 300,
                    }}
                    title={
                      <Trans ns='dashboard' i18nKey='panel.options.valueMappings.type_tip' data-oid='6iadx1d'>
                        <div data-oid='vrulnu7'></div>
                        <div data-oid='n4t13gv'></div>
                      </Trans>
                    }
                    data-oid='7h1qo4n'
                  >
                    {t('panel.options.valueMappings.type')} <InfoCircleOutlined data-oid='n6uif7x' />
                  </Tooltip>
                </Col>
                <Col flex='215' data-oid='85-gjde'>
                  {t('panel.options.valueMappings.text')}
                </Col>
                <Col flex='50' data-oid='oug2.sy'>
                  {t('panel.options.valueMappings.operations')}
                </Col>
              </Row>
            )}

            {fields.map(({ key, name, ...restField }) => {
              return (
                <Row key={key} gutter={10} style={{ marginBottom: 10 }} data-oid='3i.j87-'>
                  <Col flex='330px' data-oid='1icjw-l'>
                    <Row gutter={10} data-oid='hfj8s5:'>
                      <Col flex='120px' data-oid='1b_i0.9'>
                        <Form.Item noStyle {...restField} name={[name, 'type']} data-oid='_ej58f4'>
                          <Select style={{ width: 120 }} data-oid='.52ps4w'>
                            <Select.Option value='textValue' data-oid='731_wxa'>
                              {t('panel.options.valueMappings.type_map.textValue')}
                            </Select.Option>
                          </Select>
                        </Form.Item>
                      </Col>
                      <Col flex='1' data-oid='wucxx2p'>
                        <Form.Item noStyle {...restField} shouldUpdate data-oid='uv6_odw'>
                          {({ getFieldValue }) => {
                            const type = getFieldValue([...preNamePrefix, ...namePrefix, name, 'type']);
                            if (type === 'textValue') {
                              return (
                                <Form.Item noStyle {...restField} name={[name, 'match', 'textValue']} data-oid='qlop.r2'>
                                  <Input style={{ width: '100%' }} placeholder={t('panel.options.valueMappings.value_placeholder')} data-oid='lg086gi' />
                                </Form.Item>
                              );
                            }
                            return null;
                          }}
                        </Form.Item>
                      </Col>
                    </Row>
                  </Col>
                  <Col flex='215' data-oid='johozk6'>
                    <Form.Item noStyle {...restField} name={[name, 'result', 'text']} data-oid='..ey9bk'>
                      <Input placeholder={t('panel.options.valueMappings.text_placeholder')} data-oid='qubg98q' />
                    </Form.Item>
                  </Col>
                  <Col flex='50' data-oid='hr3h1a5'>
                    <Button
                      onClick={() => {
                        remove(name);
                      }}
                      icon={<DeleteOutlined data-oid='q8q:e8d' />}
                      data-oid='4az1ovu'
                    />
                  </Col>
                </Row>
              );
            })}
          </>
        )}
      </Form.List>
    </Panel>
  );
}
